<template>
  <div class="booking-list">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>预订列表</span>
        </div>
      </template>
      <el-table :data="bookings" style="width: 100%">
        <el-table-column prop="bookingID" label="预订ID" align="center" />
        <el-table-column prop="customerName" label="客户姓名" align="center" />
        <el-table-column prop="idCard" label="身份证号" align="center" />
        <el-table-column prop="roomNumber" label="房间号" align="center" />
        <el-table-column prop="bookingTime" label="预订时间" align="center" />
        <el-table-column prop="checkInTime" label="入住时间" align="center" />
        <el-table-column prop="checkOutTime" label="退房时间" align="center" />
        <el-table-column prop="totalAmount" label="总金额" align="center">
          <template #default="scope">
            ¥{{ scope.row.totalAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.status === '已预订'" type="primary" size="small"
              @click="handleCheckIn(scope.row)">入住</el-button>
            <el-button v-if="scope.row.status === '已入住'" type="success" size="small"
              @click="handleCheckOut(scope.row)">退房</el-button>
            <el-button v-if="scope.row.status === '已预订'" type="danger" size="small"
              @click="handleCancel(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

interface Booking {
  bookingID: number
  customerName: string
  idCard: string
  roomNumber: string
  bookingTime: string
  checkInTime: string
  checkOutTime: string
  totalAmount: number
  status: string
}

const bookings = ref<Booking[]>([])

const fetchBookings = async () => {
  try {
    const response = await fetch('http://127.0.0.1:8080/api/booking/all')
    const data = await response.json()
    bookings.value = data
  } catch (error) {
    ElMessage.error('获取预订列表失败')
    console.error('Error fetching bookings:', error)
  }
}

const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    '已预订': 'success',
    '已入住': 'info',
    '已退房': 'warning',
    '已取消': 'danger'
  }
  return statusMap[status] || 'info'
}

const handleCheckIn = async (row: Booking) => {
  try {
    const response = await fetch('http://127.0.0.1:8080/api/booking/checkin', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(row),
    });
    const result = await response.text();
    if (response.ok && result.includes('成功')) {
      ElMessage.success(result);
      fetchBookings();
    } else {
      ElMessage.error(result || '办理入住失败');
    }
  } catch (error) {
    ElMessage.error('办理入住请求失败');
    console.error('Error check-in:', error);
  }
};

const handleCheckOut = async (row: Booking) => {
  try {
    const response = await fetch('http://127.0.0.1:8080/api/booking/checkout', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(row),
    });
    const result = await response.text();
    if (response.ok && result.includes('成功')) {
      ElMessage.success(result);
      fetchBookings();
    } else {
      ElMessage.error(result || '办理退房失败');
    }
  } catch (error) {
    ElMessage.error('办理退房请求失败');
    console.error('Error check-out:', error);
  }
};

const handleCancel = async (row: Booking) => {
  try {
    const response = await fetch('http://127.0.0.1:8080/api/booking/cancel', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(row),
    });
    const result = await response.text();
    if (response.ok && result.includes('成功')) {
      ElMessage.success(result);
      fetchBookings();
    } else {
      ElMessage.error(result || '取消预订失败');
    }
  } catch (error) {
    ElMessage.error('取消预订请求失败');
    console.error('Error cancel:', error);
  }
};

onMounted(() => {
  fetchBookings()
})
</script>

<style scoped>
.booking-list {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>